<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>配置管理</el-breadcrumb-item>
            <el-breadcrumb-item>版本管理</el-breadcrumb-item>
        </el-breadcrumb>
         
        <el-card>
             
            <el-table :data="dataList" highlight-current-row v-loading="gridLoading" class="grid" style="width: 100%；">
                <el-table-column label="热更新" prop="hotUpdate" width="80">
                </el-table-column>
                <el-table-column label="安卓版本" prop="android" >
                </el-table-column>
                 <el-table-column label="ios版本" prop="ios" >
                </el-table-column>
                 <el-table-column label="当前包地址" prop="hotUpdateUrl" >
                </el-table-column>
                <el-table-column label="操作"  >
                <template slot-scope="scope">
                    <el-button size="small" @click="check(scope.row)">修改</el-button>
                     <!-- <el-button size="small" @click="check(scope.row)">修改</el-button> -->
                </template>
                 <!-- <template slot-scope="scope">
              
                  <el-button size="small" @click="check(scope.row)">修改</el-button>
                </template> -->
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="修改版本号" :visible.sync="dialogTableVisible">
             <el-form :model="form">
                <el-form-item label="是否为热更新" label-width="100px">
                   <el-switch
                    v-model="form.isHotUpdate"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="是"
                    inactive-text="否">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="form.isHotUpdate == true " label="新包地址" label-width="100px">
                    <el-input v-model="form.hotUpdateUrl" autocomplete="off" style="width: 80%;" ></el-input>
                    <!-- :headers="uploadHeader"
                    :on-preview="handlePreviewDetails"
                    :on-remove="handleRemoveDetails"
                    :multiple="true"
                    :before-upload="beforeUploadDetails"
                    :on-success="uploadSuccessDetails"  -->
                    <el-upload
                      class="upload-demo"
                      :data="params"
                      :action="upload.url"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      :on-success="uploadSuccess"
                      :before-upload="beforeUploadDetails"
                      multiple
                      :limit="3"

                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      > 
                          <el-button size="small" type="primary">上传更新包</el-button>
                  </el-upload>
                </el-form-item>
                
                <el-form-item label="安卓版本号" label-width="100px">
                <el-input v-model="form.androidVersion" autocomplete="off" style="width: 80%;"></el-input>
              
                </el-form-item>
                 <el-form-item label="ios版本号" label-width="100px">
                <el-input v-model="form.iosVersion" autocomplete="off" style="width: 80%;"></el-input>
              
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogsbmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      dialogTableVisible: false,
      form: {
        androidVersion: "",
        hotUpdateUrl: "",
        iosVersion: "",
        isHotUpdate: true
      },
      upload: {
        url:'',
        token:'',
        domain:''
      },
      params:{
        token:'',
        key:''
      },
      files:[],
      fileList:[],
    };
  },
  created() {
    this.getvresions();
    this.qiNiuYun()
  },
  methods: {
   beforeUploadDetails(file){
      console.log(file);
      
      this.params.key=file.name;
      // const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      // const isLt10M = file.size / 1024 / 1024 < 10;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
    },
    uploadSuccess(resp, file, fileList) {
      console.log(resp, file, fileList);
      // this.imgUpload(fileList, 3);

      this.form.hotUpdateUrl = this.upload.domain + resp.hash
      console.log(this.form.hotUpdateUrl)
    },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    qiNiuYun(){
       this.$http.post("/manage/userFile/qiNiuUpload").then(res =>{
        //  console.log(res)
          this.upload.token = res.data.data.token;
          this.params.token=res.data.data.token;
          this.upload.domain = res.data.data.domain;
          this.upload.url = res.data.data.upload_url;
          // console.log(this.upload.url)
       })
    },
    
    dialogsbmit() {
      console.log(this.form);
      this.$http.post("/manage/conf/editVersion",this.form).then(res =>{
        console.log(res)
        if(res.data.status == 1) {
             this.dialogTableVisible = false;
             
               this.$message({
                message: "更新成功",
                type: 'success'
              });
              this.getvresions()
        }else {
          this.dialogTableVisible = false;
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            });
        }
      })
    },
    check(row) {
      console.log(row);
      this.form.iosVersion = row.ios;
      this.form.androidVersion = row.android;
       this.form.isHotUpdate = row.hotUpdate;
      this.dialogTableVisible = true;
      this.zanUrl = this.hotUpdateUrl
      
    },
    getvresions() {
      this.$http.post("/manage/conf/appUpdateInfo", {}).then(res => {
        console.log(res);
        if (res.data.status == 1) {
          this.dataList = res.data.data;
        }
      });
    }
  }
};
</script>
